<template>
  <!-- 弹窗需要使用到element的dialog对话框组件 -->
  <!-- 新增部门的弹窗 -->
  <!-- visible 控制是否显示 -->
  <el-dialog :title="showTitle" :visible="showDialog" @close="btnCancel">
    <!-- 表单组件 el-form label-width设置label的宽度 -->
    <!-- 匿名插槽 -->
    <el-form ref="deptForm" :model="formData" :rules="rules" label-width="120px">
      <el-form-item prop="name" label="部门名称">
        <el-input v-model="formData.name" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item prop="code" label="部门编码">
        <el-input v-model="formData.code" style="width:80%" placeholder="1-50个字符" />
      </el-form-item>
      <el-form-item prop="manager" label="部门负责人">
        <el-select v-model="formData.manager" style="width:80%" placeholder="请选择" @focus="getEmployeesSimple">
          <el-option v-for="item in peoples" :key="item.id" :value="item.username" :label="item.username" />
        </el-select>
      </el-form-item>
      <el-form-item prop="introduce" label="部门介绍">
        <el-input v-model="formData.introduce" style="width:80%" placeholder="1-300个字符" type="textarea" :rows="3" />
      </el-form-item>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button size="small" @click="btnCancel">取 消</el-button>
      <el-button type="primary" size="small" @click="btnOk">确 定</el-button>
    </div>
  </el-dialog>
</template>

<script>
import {
  getDepartmentsApi,
  addDepartment,
  getDepartDetail,
  updateDepart
} from '@/api/departments'
import { getEmployeesSimple } from '@/api/employees'
export default {
  // 组件名称
  name: 'AddDept',
  // 局部注册的组件
  components: {},
  // 组件参数 接收来自父组件的数据
  props: {
    showDialog: {
      type: Boolean,
      default: false
    },
    treeNode: {
      type: Object,
      default: null
    }
  },
  // 组件状态值
  data() {
    // 现在定义一个函数 这个函数的目的是 去找同级部门下 是否有重复的部门名称
    const checkNameRepeat = async(rule, value, callback) => {
      // 先要获取最新的组织架构数据
      const { depts } = await getDepartmentsApi()
      // depts是所有的部门数据
      // 如何去找某个部门所有的子节点
      // 根据有无id 决定哪一种校验模式 有id切换编辑校验模式 无id切换新增校验模式
      let isRepeat = false
      if (this.formData.id) {
        // 编辑模式的校验规则 判断同级部门下除了我以外是否有重复的名字
        isRepeat = depts.filter(item => item.pid === this.formData.pid && item.id !== this.formData.id).some(item => item.name === value)
      } else { // 新增子部门模式的校验规则
        isRepeat = depts.filter(item => item.pid === this.treeNode.id).some(item => item.name === value)
      }
      isRepeat ? callback(new Error(`已经存在${value}这个部门`)) : callback()
    }
    // 检查编码重复
    const checkCodeRepeat = async(rule, value, callback) => {
      // 先要获取最新的组织架构数据
      const { depts } = await getDepartmentsApi()
      let isRepeat = false
      if (this.formData.id) {
        // 编辑模式的校验规则
        isRepeat = depts.some(item => item.id !== this.formData.id && item.code === value)
      } else { // 新增子部门模式的校验规则
        isRepeat = depts.some(item => item.code === value)
      }
      isRepeat ? callback(new Error(`组织架构中已经有部门使用${value}编码`)) : callback()
    }
    return {
      formData: {
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: ''// 部门介绍
      },
      rules: { // 定义校验规则
        name: [{ required: true, message: '部门名称不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门名称要求1-50个字符', trigger: 'blur' }, {
            validator: checkNameRepeat, trigger: 'blur'
          }],
        code: [{ required: true, message: '部门编码不能为空', trigger: 'blur' },
          { min: 1, max: 50, message: '部门编码要求1-50个字符', trigger: 'blur' }, {
            validator: checkCodeRepeat, trigger: 'blur'
          }],
        manager: [{ required: true, message: '部门负责人不能为空', trigger: 'blur' }
        ],
        introduce: [{ required: true, message: '部门介绍不能为空', trigger: 'blur' },
          { min: 1, max: 300, message: '部门介绍要求1-300个字符', trigger: 'blur' }]
      },
      peoples: []// 接受获取的员工简单列表数据
    }
  },
  // 计算属性
  computed: {
    showTitle() {
      // 只有编辑的时候formData才有数据
      return this.formData.name ? '编辑部门' : '新增子部门'
    }
  },
  // 侦听器
  watch: {},
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
  * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
  */
  created() {},
  /**
  * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
  * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
  */
  mounted() {},
  // 组件方法
  methods: {
    async getEmployeesSimple() {
      this.peoples = await getEmployeesSimple()
    },
    btnOk() { // 点击确定时触发
      this.$refs.deptForm.validate(async isOk => {
        if (isOk) {
          // 根据有无id判断当前是编辑还是新增
          let tip = ''
          if (this.formData.id) {
            // 编辑模式 调用编辑接口
            await updateDepart(this.formData)
            tip = '编辑'
          } else {
            // 新增模式
            await addDepartment({ ...this.formData, pid: this.treeNode.id })
            tip = '添加'
          }
          // 表示可以提交了
          this.$emit('addDepts')
          this.$emit('update:showDialog', false) // 触发事件

          this.$message.success(`${tip}成功`)
        }
      })
    },
    btnCancel() { // 点击取消与关闭时触发
      this.formData = { // 重置表单数据
        name: '', // 部门名称
        code: '', // 部门编码
        manager: '', // 部门管理者
        introduce: ''// 部门介绍
      }
      this.$refs.deptForm.resetFields() // 重置校验字段
      this.$emit('update:showDialog', false)// 关闭
    },
    // 获取部门详情
    async getDepartDetail(id) {
      this.formData = await getDepartDetail(id)
    }
  }
}
</script>

<style scoped lang="less">

</style>
